<script setup lang="ts">
  import { ref, provide, nextTick, onMounted, watch, watchEffect } from "vue"
  import * as echarts from 'echarts'
  import { ECharts, EChartsOption } from 'echarts'
  import { useEcharts, changeEcharsThemes } from "@/hooks/useEcharts"
  import { useGlobalStore } from '@/stores/modules/global'
  // 对elementui等框架会造成影响 错位大小不对等
  import autofit from "autofit.js"

  const globalStore = useGlobalStore()

  const option_1: EChartsOption = {
    title: { text: "Column Chart" },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      }
    ]
  }
  const option_2: EChartsOption = {
    title: { text: "Column Chart" },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫"],
    },
    yAxis: {},
    series: []
  }
  const none_option: EChartsOption = {
    title: {
      text: '暂无数据',
      x: 'center',
      y: 'center'
    }
  }

  let echart: ECharts
  const echartRef = ref(null)
  const initChart = () => {
    echart = echarts.init(echartRef.value, globalStore.getTheme)
    useEcharts(echart, option_1)
  }

  onMounted(() => {
    initChart()
    autofit.init({
      dw: 1920,
      dh: 1080,
      el: ".iot-main",
      resize: true
    })
  })

  // 监听pinia变化
  globalStore.$subscribe((mutation, state) => {
    if (state.theme) {
      echart.dispose()
      initChart()
      //changeEcharsThemes(echart, initChart)
    }
  })

  let echart2: ECharts
  const echartRef2 = ref(null)
  const initChart2 = () => {
    echart2 = echarts.init(echartRef2.value, globalStore.getTheme)
    useEcharts(echart2, none_option)
    getData()
  }
  const getData = () => {
    setTimeout(() => {
      const newData = {
        name: "销量",
        type: "bar",
        data: [5, 99],
      }
      option_2.series[0] = newData
      useEcharts(echart2, option_2, true)
    }, 1300)
  }

  // 改变主题
  let theme = ref(globalStore.getTheme)
  const changeTheme = () => {
    if (theme.value === 'light') {
      theme.value = 'dark'
      globalStore.changeTheme('dark')
    } else {
      theme.value = 'light'
      globalStore.changeTheme('light')
    }
  }

  //弹窗 异步
  let dialogVisible = ref<boolean>(false)
  const openDialog = () => {
    dialogVisible.value = true
    nextTick(() => {
      initChart2()
    })
  }
  const closeDialog = () => {
    dialogVisible.value = false
    echart2.dispose()
  }
</script>

<template>
  <div class="iot-main">
    <div>
      <el-button type="primary" @click="changeTheme"> 切换主题 {{theme}} </el-button>
      <el-button type="primary" @click="openDialog"> 打开dialog </el-button>
    </div>
    <div ref="echartRef" style="width: 100%; height: 300px"></div>
    <!--弹窗-->
    <el-dialog title="提示" v-model="dialogVisible" width="30%" @close="closeDialog">
      <div ref="echartRef2" style="width: 100%; height: 300px"></div>
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="closeDialog">确 定</el-button>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
  .iot-main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

</style>